<script lang="ts" setup>
import { useRouter } from "vue-router";
import { ref, onMounted } from "vue";
import { useCounterStore } from "@/stores/counter";
import { deleteReservation } from "@/api/reservation";
import { showConfirmDialog } from "vant";

const useStore = useCounterStore();
const router = useRouter();
function onClickLeft() {
  router.back();
}
// 删除预约
function deleteReservationClick() {
  showConfirmDialog({
    title: "取消预约",
    message: "您是否确定取消预约",
  }).then(() => {
    deleteReservation(useStore.reservationInfo).then((res) => {
      router.push("/home");
    });
  });
}
onMounted(() => {
  // console.log(useStore.reservationInfo);
});
</script>

<template>
  <div>
    <van-nav-bar left-arrow @click-left="onClickLeft" />
    <div class="top">
      <p>预约挂号成功,请就诊日当天打开APP等待医生呼叫</p>
    </div>
    <div class="main">
      <div class="main_box">
        <div class="main_box_top">
          <van-image :src="useStore.reservationInfo.image" alt=""></van-image>
          <div>
            <span class="doctorName">{{
              useStore.reservationInfo.doctorname
            }}</span>
            <span>{{ useStore.reservationInfo.position }}</span>
            <p>{{ useStore.reservationInfo.hospital }}</p>
          </div>
        </div>
        <div class="main_box_center">
          <p>
            <span>就诊医院科室</span
            ><span>{{
              useStore.reservationInfo.hospital +
              "-" +
              useStore.reservationInfo.kinds
            }}</span>
          </p>
          <p><span>就诊类型</span><span>专家门诊</span></p>
          <p><span>医事服务费</span><span>318元</span></p>
        </div>
        <div class="main_box_bottom">
          <p>
            <van-icon color="orange" name="info" size="22" />
            <span style="color: orange">互联网门诊预约须知</span>
            <span>(预约即代表同意以下规则)</span>
          </p>
          <ul>
            <li>1.医事服务费由医院设定本平台不收取任何额外费用</li>
            <li>2.停诊将短信通知，请保持手机畅通</li>
            <li>3.实名制预约，就诊人信息不符将无法取号</li>
            <li>
              门诊为网上就诊，届时医生将拨打患者网络电话，如无法在在规定时间内接听视为爽约
            </li>
          </ul>
        </div>
      </div>
      <p>就诊人：</p>
      <div class="main_box">
        <p class="visitor_box">
          <span class="visitorName">{{ useStore.reservationInfo.visitor }}</span
          ><span>{{
            useStore.reservationInfo.gender +
            " | " +
            useStore.reservationInfo.age
          }}</span>
        </p>
        <p class="visitor_box_next">
          <span>报销类型</span><span>医保报销</span>
        </p>
      </div>
    </div>
    <div class="btn_box">
      <van-button round type="default" @click="deleteReservationClick"
        >取消预约</van-button
      >
      <van-button round type="primary" @click="$router.push('/home')"
        >返回首页</van-button
      >
    </div>
  </div>
</template>

<style lang="scss" scoped>
.van-nav-bar {
  background-color: rgb(113, 164, 247);
}
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 5%;
  .main_box {
    background-color: #fff;
    padding: 0.1rem;
    width: 90%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    border-radius: 0.15rem;
    box-shadow: 0.03rem 0.03rem 0.1rem #393938;
    margin: 0.05rem 0;
    .main_box_top {
      height: 0.8rem;
      width: 100%;
      display: flex;
      padding-bottom: 0.03rem;
      border-bottom: 1px solid #d1eef8;
      .van-image {
        height: 100%;
        width: 1.5rem;
        margin-right: 0.15rem;
      }
      .doctorName {
        font-size: 0.2rem;
      }
      span {
        font-weight: 900;
      }
    }
    .main_box_center {
      border-bottom: 1px solid #d1eef8;
      p {
        display: flex;
        justify-content: space-between;
      }
    }
    .visitor_box {
      padding: 0.05rem 0;
      border-bottom: 1px solid #d1eef8;
      margin: 0;
      .visitorName {
        font-weight: 700;
        font-size: 0.2rem;
        margin-right: 0.05rem;
      }
    }
    .visitor_box_next {
      display: flex;
      justify-content: space-between;
    }
  }
}
.btn_box {
  display: flex;
  justify-content: space-around;
  .van-button {
    width: 40%;
  }
}
</style>
